<template>
 <div class="checkMatchSighUp">
   <div class="TopBar">
     <div style="display: flex;">
       <div>赛事名称：<b>{{MatchSign.name}}</b></div>
       <div style="font-weight: bold;"></div>
     </div>
     <div style="display: flex;align-items: baseline;">
       裁判长：<b>{{MatchSign.get_ref.get_user.name}}</b></div>
     <div style="display: flex;">
       <a  :href="SignUrl" download='签到信息'>
         <el-button type="primary" size="medium" style="height: 100%;">导出签到信息</el-button>
       </a>
       <el-button round style="width: 120px;margin-left: 10px;" type="primary" plain @click="Back">返回</el-button>
     </div>
   </div>
   <div class="Content" style="margin-top: 30px">
     <div class="ContentSelect">
       <div class="Team">
         <div>组别：<b>{{checkMatchSignUp.teamsSelect|teams}}</b></div>
       </div>
       <div v-if="!checkMatchSignUp.showLimitInputs" class="Team">
         <div>省份：<b>{{checkMatchSignUp.searchProvinceSelect|province}}</b></div>
       </div>
       <div v-if="checkMatchSignUp.showLimitInputs" class="Team">
         <div class="TeamName">自定义：<b>{{SearchSelfDefinedInput|selfDefined}}</b></div>
       </div>
       <div class="Team">
         <div>关键字：<b>{{checkMatchSignUp.SearchInput|keyWord}}</b></div>
       </div>
     </div>
     <el-card style="margin-top: 30px; margin-left: 180px;width: 75%;">
      <el-table
       ref="multipleTable"
       :data="checkMatchSignUp.MatchSignUpTable"
       tooltip-effect="dark">
       <!--<el-table-column-->
       <!--width="100">-->
       <!--</el-table-column>-->
       <el-table-column
         prop="name"
         label="姓名"
         width="120">
       </el-table-column>
       <el-table-column
         prop="project"
         label="项目-组别"
         width="120">
       </el-table-column>
       <el-table-column
         prop="card"
         label="身份证号"
         width="180"
         show-overflow-tooltip>
       </el-table-column>
       <el-table-column
         prop="sexs"
         label="性别"
         width="60">
       </el-table-column>
       <el-table-column
         prop="age"
         label="年龄"
         width="60">
       </el-table-column>
       <el-table-column
         prop="phone"
         label="手机号"
         width="120">
       </el-table-column>
       <el-table-column
         prop="customize[0]"
         label="省份"
         width="120">
       </el-table-column>
       <el-table-column
         prop="create_time"
         label="报名时间 "
         width="180">
       </el-table-column>
      </el-table>
     </el-card>
   </div>
   <div style="justify-content: center;display: flex;margin-top: 50px;">
     <!--<el-button round style="width: 150px;" type="primary" plain @click="Back">返回</el-button>-->
   </div>
 </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "checkMatchSignUp",
        data(){
          return{
            // SignUrl:'',
            // ApplyUrl:''
          }
        },
      computed:{
        ...mapState({
          MatchSign:'MatchSign',
          checkMatchSignUp:'checkMatchSignUp'
        }),
        SignUrl(){
          let url = this.$axios.defaults.baseURL + '/event/export_sign?com_id=' + this.$route.query.matchId + '&status=1'
          console.log(url)
          return url
        }
      },
      filters:{
        teams(val){
          if(!val){  //如果为空时true
            return '无'
          }
          else{
            return val
          }
        },
        province(val){
          if(!val){  //如果为空时true
            return '无'
          }
          else{
            return val
          }
        },
        selfDefined(val){
          if(!val){  //如果为空时true
            return '无'
          }
          else{
            return val
          }
        },
        keyWord(val){
          if(!val){  //如果为空时true
            return '无'
          }
          else{
            return val
          }
        }

      },
      watch:{
        checkMatchSignUp(val){
          console.log(val)
        }
      },
      methods:{
        // exportApplySignUp(type){
        //   let status = null
        //   if(type==1){
        //     status = 1
        //   }
        //   let url = this.$axios.defaults.baseURL
        //   this.$axios.get('/event/export_sign',{
        //     params: {
        //       com_id: this.$route.query.matchId,
        //       status: status,
        //     },
        //     headers:{
        //       token:window.sessionStorage.getItem('token')
        //     }
        //   }).then((res)=>{
        //     console.log(res)
        //     if(res.status==200){
        //       if(type==1) {
        //         this.SignUrl = url + '/event/export_sign?com_id=' + this.$route.query.MatchId + '&status=' + status
        //       }
        //       else{
        //         this.ApplyUrl = url + '/event/export_sign?com_id=' + this.$route.query.MatchId
        //       }
        //     }
        //   })
        // },
        Back(){
          this.$router.go(-1)
        },
      }
    }
</script>

<style scoped>
.checkMatchSighUp{
  width: 90%;
  margin-top: 50px;
  margin-left: 40px;
  display: flex;
  flex-direction: column;
}
.TopBar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #93C6FA;
  padding-left: 160px;
}
.ContentSelect{
  display: flex;
  padding-left: 160px;
}
.Team{
  display: flex;
  align-items: center;
  width:300px;
}
.TeamName{
  width: 100px;
}
</style>
